<template>
  <div>
    <div class="a" href="123" qwe="qwe"></div>
    <h1>{{ count }}</h1>
    <button @click="count++">++</button>
    <!-- 3.使用组件 -->
    <List :qwe="arr"></List>
    <List :qwe="list"></List>
    <Banner></Banner>
    <Columns :title="title"></Columns>
  </div>
</template>


<script>
/* 1. 引入组件 */
import List from "./components/List.vue";
import Banner from "./components/Banner.vue";
import Columns from "./components/Columns.vue";
/**
 * 局部组件
 * 1. 引入    import 组件名称  from '组件相对路径'
 * 2. 注册    components: { 组件名称 }
 * 3. 使用    <组件名称></组件名称>
 *
 */

/**
 * 组件通信
 * 1. 父子通信
 *   1-1  在组件使用的时候绑定自定义属性  <组件 :自定义属性="值"></组件>
 *   1-2  在组件内部使用   props: ['自定义属性']
 * */ 

export default {
  data() {
    return {
      count: 1,
      arr: [1, 2, 3, 4],
      list: ['a', 'b', 'c', 'd'],
      title: '我是标题'
    };
  },
  /* 2. 组件注册*/

  components: {
    List,
    Banner,
    Columns
  }
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>